<template>
  <div class="bar-container">
    <div class="bar-card">
      <h2 class="bar-title">阅后即焚</h2>

      <div v-if="loading" class="bar-empty">正在加载...</div>
      <div v-else-if="error" class="bar-empty">{{ error }}</div>

      <div v-else-if="imageUrl" class="bar-image-wrap">
        <img :src="imageUrl" alt="阅后即焚图片" class="bar-image" @error="onImgError" />
      </div>

      <div v-else class="bar-empty">
        <p v-if="imageId">未获取到{{ imageId }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getBurnAfterReadingImage } from '@/api/system/user'

export default {
  name: 'BurnAfterReadingPublic',
  data() {
    return {
      imageId: this.$route.params && this.$route.params.id ? this.$route.params.id : '',
      imageUrl: this.$route.query && this.$route.query.url ? decodeURIComponent(this.$route.query.url) : '',
      loading: false,
      error: ''
    }
  },
  created() {
    if (!this.imageUrl && this.imageId) {
      this.fetchById(this.imageId)
    }
  },
  methods: {
    fetchById(id) {
      this.loading = true
      this.error = ''
      getBurnAfterReadingImage(id)
        .then(res => {
          if (res && res.code === 200 && res.data) {
            // 兼容对象字段
            this.imageUrl = res.data.imageUrl || res.data.url || ''
            if (!this.imageUrl) {
              this.error = '未获取到图片链接'
            }
          } else {
            this.error = (res && res.msg) ? res.msg : '图片不存在或已失效'
          }
        })
        .catch(() => {
          this.error = '加载失败，请稍后重试'
        })
        .finally(() => {
          this.loading = false
        })
    },
    onImgError() {
      this.error = '图片加载失败，链接可能已失效'
    }
  }
}
</script>

<style scoped>
.bar-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  padding: 24px;
}

.bar-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  max-width: 720px;
  width: 100%;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  text-align: center;
}

.bar-title {
  margin: 0 0 8px 0;
  font-size: 22px;
  color: #303133;
}

.bar-subtitle {
  margin: 0 0 16px 0;
  font-size: 13px;
  color: #909399;
}

.bar-image-wrap {
  margin-top: 12px;
}

.bar-image {
  max-width: 100%;
  max-height: 60vh;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.bar-link {
  margin-top: 12px;
  color: #606266;
  word-break: break-all;
}

.bar-empty {
  color: #909399;
  font-size: 14px;
}
</style>
